<template>
	<view class="e-p-l-20 e-p-r-20" :style="[AppSkinVar]">
		<view class="h-128 e-flex e-flex-between">
			<view class="btn-box e-flex-xy-center" :class="[currentIndex === -1 ? 'c-white' : 'c-34']"
				:style="{background: currentIndex === -1 ? AppSkin.primary : ''}" @tap="handleClick(-1)">
				{{$t('common.全部')}}
			</view>
			<view class="btn-box e-flex-xy-center" :class="[currentIndex === 0 ? 'c-white' : 'c-34']"
				:style="{background: currentIndex === 0 ? AppSkin.primary : ''}" @tap="handleClick(0)">
				{{$t('common.已分享')}}
			</view>
			<view class="btn-box e-flex-xy-center" :class="[currentIndex === 1 ? 'c-white' : 'c-34']"
				:style="{background: currentIndex === 1 ? AppSkin.primary : ''}" @tap="handleClick(1)">
				{{$t('common.已使用')}}
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="getData" lower-threshold="60" class="scroll-view-box">
			<view class="">

				<view class="item-box e-p-l-20 e-p-r-20 e-m-b-20 e-rela" v-for="item in list" :key="item.id">
					<view class="c-333 e-font-28 e-abso state-box">
						<text v-if="item.status == 0">{{$t('common.已分享')}}</text>
						<text v-else-if="item.status == 1">{{$t('common.已使用')}}</text>
					</view>
					<view class="e-p-t-30 e-m-r-18 e-font-28 c-333 fw-600 e-p-r-60">
						{{$t('advanceShare.券码名称')}}：{{item.couponName}}
					</view>
					<view class="h-100 e-flex">
						<view class="e-flex-1 e-flex" @tap="$copy(item.couponShareCode)">
							<text
								class="e-m-r-18 e-font-28 c-333 fw-600">{{$t('advanceShare.券码')}}：{{item.couponShareCode}}</text>
							<image :src="$staticPath('copy.png')" class="img-32 e-m-r-10"></image>
						</view>

					</view>
					<view class="e-p-t-30 e-p-b-40">
						<view class="e-flex  e-font-28 e-m-b-16" @tap="$copy(item.shareUrl)">
							<text class="c-secondary" style="white-space: nowrap;">{{$t('advanceShare.分享链接')}}：</text>
							<text class="e-line-1 c-333 e-m-r-20">{{item.shareUrl}}</text>
							<image :src="$staticPath('copy.png')" class="img-32 e-m-r-10" style="flex: 0 0 32rpx">
							</image>
						</view>
						<view class="e-flex e-m-b-16">
							<text class="c-secondary">{{$t('advanceShare.分享时间')}}：</text>
							<text class="c-333 e-m-r-20">{{item.shareTime}}</text>
						</view>
						<view class="e-flex e-m-b-16" v-if="item.receiveNickName">
							<text class="c-secondary">{{$t('advanceShare.领取用户')}}：</text>
							<text class="c-333 e-m-r-20">{{item.receiveNickName}} {{item.receiveUserName}}</text>
						</view>
						<view class="e-flex" v-if="item.receiveTime">
							<text class="c-secondary">{{$t('public.使用时间')}}：</text>
							<text class="c-333 e-m-r-20">{{item.receiveTime}}</text>
						</view>
					</view>
				</view>
				<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="isEmpty"></empty>
				<load-more :showLoad="showLoad" v-else></load-more>


			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import {
		getCouponShareDetail
	} from '@/common/request/api'
	import { useQueryPage } from '@/common/hooks'
	import { useInit } from '@/common/stores'
	import { storeToRefs } from 'pinia'

	const props = defineProps({
		couponShareCode: String
	})

	const { AppSkin } = storeToRefs(useInit())
	
	const currentIndex = ref(-1)
	const requestParams = computed(() => {
		return {
			couponShareCode: props.couponShareCode,
			status: currentIndex.value === -1 ? null : currentIndex.value
		}
	})

	const {
		isEmpty,
		showLoad,
		list,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: getCouponShareDetail,
		option: {
			params: requestParams
		}
	})
	handleRefresh()

	const getData = () => {
		handleQueryPage()
	}


	const handleClick = (index : number) => {
		currentIndex.value = index
		handleRefresh()
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.h-128 {
		width: calc(100vw - 40rpx);
		height: 128rpx;
	}

	.btn-box {
		width: 170rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 46rpx;
	}

	.e-flex-between {
		justify-content: space-between;
	}

	.c-34 {
		color: #343434;
	}

	.scroll-view-box {
		height: calc(100vh - 128rpx);
	}

	.item-box {
		border-radius: 20rpx;
		box-shadow: inset 0px -1px 0px 0px #F3F3F3;
		background-color: white;
	}

	.h-100 {
		height: 100rpx;
	}

	.state-box {
		top: 30rpx;
		right: 30rpx;
	}
</style>